<%@page import="cz.acies.utils.UIDGenerator"%>
<%@page import="org.apache.commons.lang3.time.DateFormatUtils"%>
<%@page import="cz.acies.genea.data.dao.*"%>
<%@page import="cz.acies.genea.data.persist.*"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
String theme = "metro-orange";

Map<String, Object> params = new HashMap<String, Object>();
Enumeration<String> e = request.getParameterNames();
while (e.hasMoreElements()) {
    String key =  e.nextElement();
    params.put(key, request.getParameter(key));
}
String recordId = (String) params.get("recordId");
GedPersonDAO dao = new GedPersonDAO();
GedPerson record = null;
if (recordId == null || recordId.trim().length() == 0) {
	record = new GedPerson(UIDGenerator.createUID("GE.R."));
} else {
	record = dao.selectById(recordId);
}

//recordId = "GE-R-0000000017";
//System.out.println("record: " + record);
%>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="<%=path%>/libs/themes/<%=theme%>/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=path%>/libs/themes/icon.css">
<style type="text/css">
body {
	font-family: sans-serif;
	font-size: 11px;
	margin: 0px;
}
.genea-textfiled input {
	border: 1px solid rgb(212,163,117); 
	font-size: 11px;
}
</style>

<script type="text/javascript" src="<%=path%>/libs/jquery-1.9.1.js"></script>
<script type="text/javascript" src="<%=path%>/libs/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=path%>/libs/aciea.utils.js"></script>
<script type="text/javascript">
$(document.body).ready(function() {});
</script>
</head>

<body>
	<form id="person_EditForm" method="post">
		<script type="text/javascript">
		$("#person_EditForm").form({
			onSubmit: function() {},
			success:function(data) {
				alert(data)
			}
		});
		</script>
		<input name="id" type="hidden" value="<%=recordId%>">
		<table style="margin: 20px;">
			<tr>
				<td>Jméno:</td>
				<td>
					<input id="firstName" name="firstName" class="easyui-textfiled"
						value="<%=(record.hasFirstName()) ? record.getFirstName() : ""%>" style="width: 200px"></input>
				</td>
			</tr>
			<tr>
				<td>Příjmení:</td>
				<td>
					<input id="lastName" name="lastName" class="easyui-textfiled"
						value="<%=(record.hasLastName()) ? record.getLastName() : ""%>" style="width:200px"></input>
				</td>
			</tr>
			<tr>
				<td>Rodné příjmení:</td>
				<td>
					<input id="maidenName" name="maidenName" class="easyui-textfiled" 
						value="<%=(record.hasMaidenName()) ? record.getMaidenName() : ""%>" style="width:200px"></input>
				</td>
			</tr>
			<tr>
				<td>Pohlaví:</td>
                <td>
                	<select id="genderCbo" class="easyui-combobox" name="gender">
                		<option value="M">Muž</option>
                		<option value="F">Žena</option>
                	</select>
                </td>
			</tr>
			<tr>
				<td>Datum narození:</td>
				<td>
					<input id="birthDate" name="birthDate" type="text"
						required="required" class="easyui-datebox"
						value="<%=((record.hasBirthDate()) ? DateFormatUtils.format(record.getBirthDate(), "d.M.yyyy") : "1.1.2099")%>"/>
					<script type="text/javascript">
					$("#birthDate").datebox({ required:true });
					</script>
				</td>
			</tr>
			<tr>
				<td>Místo narození:</td>
				<td>
					<input id="birthPlace" name="birthPlace"
						class="easyui-textfiled" value="<%=(record.hasBirthPlace()) ? record.getBirthPlace():""%>"
						style="width:200px;"></input>
				</td>
			</tr>
			<tr>
				<td colspan="9"><hr/></td>
			</tr>
			<tr>
				<td>Datum umrtí:</td>
				<td>
					<input id="deathDate" name="deathDate" type="text" class="easyui-datebox"
						value="<%=((record.hasDeathDate()) ? DateFormatUtils.format(record.getDeathDate(), "d.M.yyyy") : "1.1.2099")%>"/>
					<script type="text/javascript">
					$("#deathDay").datebox({
						required : false
					});
					</script>
				</td>
			</tr>
			<tr>
				<td>Místo umrti:</td>
				<td>
					<input id="deathPlace" name="deathPlace"
						class="easyui-textfiled" value="<%=(record.hasDeathPlace()) ? record.getDeathPlace() : ""%>"
						style="width:200px"></input>
				</td>
			</tr>
            <tr>
                <td colspan="9"><hr /></td>
            </tr>
			<tr>
				<td>Otec:</td>
				<td>
					<input id="fatherId" name="fatherId" type="hidden" value="<%=(record.hasFather()) ? record.getFather().getId() : ""%>"/>
					<input id="fatherName" name="fatherName" class="easyui-searchbox"/> 
                    <script>
                        function doSearch(value) {
                            alert("You input: " + value);
                        }
                        $("#motherName").searchbox({
                            height: 18,
                            width: 205,
                            searcher: doSearch
                        });
                    </script>
					<%--  
					<input id="fatherName" name="fatherName"
						class="easyui-textfiled" style="width:200px"
						value="<%=record.getFather().getDisplayName()%>"></input>
					--%>
				</td>
			</tr>
			<tr>
				<td>Matka:</td>
				<td>
				    <input id="motherId" name="motherId" type="hidden" value="<%=(record.hasMather()) ? record.getMather().getId() : ""%>"></input>
					<input id="motherName" name="motherName" class="easyui-searchbox"></input> 
					<script>
						function doSearch(value) {
							alert("You input: " + value);
						}
						$("#motherName").searchbox({
							height: 18,
							width: 205,
							searcher: doSearch
						});
					</script> 
					<%--  
					<input id="motherName" name="motherName"
						class="easyui-textfiled" style="width:200px"
						value="<%=record.getMather().getDisplayName()%>"></input>
				    --%>
				</td>
			</tr>
			<tr>
				<td colspan="9"><hr /></td>
			</tr>
			<tr>
				<td colspan="2">Partneří</td>
				<td colspan="2">Děti</td>
			</tr>
			<tr>
				<td colspan="2">
					<table id="partnersTbl" class="easyui-datagrid" style="height: 200px"></table>
					<script type="text/javascript">
						$("#partnersTbl").datagrid({
							singleSelect : true,
							collapsible : true,
							columns : [[{
								field : "displayName",
								width : 200,
								title : "Osoba"
							}, {
								field : "birthday",
								width : 100,
								title : "Datum nar."
							}]]
						});
					</script>
				</td>
				<td colspan="2" style="">
					<table id="childrenTbl" class="easyui-datagrid" style="height: 200px; width: 300px;"></table>
					<script type="text/javascript">
						$("#childrenTbl").datagrid({
							singleSelect : true,
							collapsible : true,
							columns : [[{
								field : "displayName",
								width : 200,
								title : "Osoba"
							}, {
								field : "birthday",
								width : 100,
								title : "Datum nar."
							}]]
						});
					</script>
				</td>
			</tr>
			
		</table>
		<script type="text/javascript">
		
		</script>
	</form>
	<!-- 
	<div style="height: 30px"></div>
	<div style="height: 30px"></div>
	-->
</body>
</html>
